<template>
  <card>
    <p slot="title">
        <Icon type="compose"></Icon>
        基本信息
    </p>
    <Form ref="formItem" :model="formItem" :rules="ruleForm" :label-width="120">
        <Row type="flex">
            <Col span="6">
                <FormItem label="商品名称：" prop="name">
                    <Input v-model="formItem.name" size="large" placeholder="请填写内容..."></Input>
                </FormItem>
            </Col>
            <Col span="6">
                <FormItem label="商品大类：" prop="bigClassId">
                    <Select v-model="formItem.bigClassId" clearable size="large" style="width:100%" :label-in-value=true @on-change="changeBigCategory">
                        <Option v-for="item in bigCategorys" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col span="6">
                <FormItem label="商品小类：" prop="smallClassId">
                    <Select v-model="formItem.smallClassId" size="large" style="width:100%" :label-in-value=true @on-change="changeSmallCategory">
                        <Option v-for="item in smallCategorys" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col span="6">
                <FormItem label="价格：" prop="price">
                    <InputNumber style="width: 100%" :min="1" v-model="formItem.price"></InputNumber>
                </FormItem>
            </Col>
        </Row>
        <Row type="flex">
            <Col span="4">
                <FormItem label="药品：" prop="recommend">
                    <Checkbox label="" :true-value="1" :false-value="0" v-model="formItem.isDrug"></Checkbox>
                </FormItem>
            </Col>
        </Row>
        <Row type="flex">
            <Col span="12">
                <FormItem label="主要功效成分：" prop="effect">
                    <Input :rows="4" :autosize="{minRows: 4}" v-model="formItem.effect" type="textarea" placeholder="请输入内容..."></Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="全成分配方：" prop="ingredient">
                    <Input :rows="4" :autosize="{minRows: 4}" v-model="formItem.ingredient" type="textarea" placeholder="请输入内容..."></Input>
                </FormItem>
            </Col>
        </Row>
        <Row type="flex">
            <Col span="12">
                <FormItem label="适用症状：" prop="symptom">
                    <Input :rows="4" :autosize="{minRows: 4}" v-model="formItem.symptom" type="textarea" placeholder="请输入内容..."></Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="使用方法：" prop="instructions">
                    <Input :rows="4" :autosize="{minRows: 4}" v-model="formItem.instructions" type="textarea" placeholder="请输入内容..."></Input>
                </FormItem>
            </Col>
        </Row>
        <Row type="flex">
            <Col span="12">
                <FormItem label="产品特点：" prop="features">
                    <Input :rows="4" :autosize="{minRows: 4}" v-model="formItem.features" type="textarea" placeholder="请输入内容..."></Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="公司及产地：" prop="company">
                    <Input :rows="4" :autosize="{minRows: 4}" v-model="formItem.company" type="textarea" placeholder="请输入内容..."></Input>
                </FormItem>
            </Col>
        </Row>
        <Row type="flex">
            <Col span="12">
                <FormItem label="推荐指数：" prop="recommend">
                    <Input :rows="4" :autosize="{minRows: 4}" v-model="formItem.recommend" type="textarea" placeholder="请输入内容..."></Input>
                </FormItem>
            </Col>
        </Row>
        <Row type="flex">
            <Col span="24">
                <FormItem>
                    <Button @click="save" size="large" type="primary">保存</Button>
                    <Button @click="close" size="large" type="ghost" style="margin-left: 8px">关闭</Button>
                </FormItem>
            </Col>
        </Row>
    </Form>
  </card>
</template>

<script>
export default {
    data () {
        return {
            baseURL: '/user/product',
            categoryURL: '/user/category',
            bigCategorys: [],
            smallCategorys: [],
            formItem: {
                id: '',
                name: '',
                bigClassId: '',
                bigClassName: '',
                smallClassId: '',
                smallClassName: '',
                price: '',
                effect: '',
                ingredient: '',
                symptom: '',
                instructions: '',
                features: '',
                company: '',
                recommend: '',
                isDrug: ''
            },
            ruleForm: {
                name: [
                    { required: true, message: '请填写商品名称', pattern: /.+/, trigger: 'change' }
                ],
                bigClassId: [
                    { required: true, message: '请选择商品大类', pattern: /.+/, trigger: 'change' }
                ],
                smallClassId: [
                    { required: true, message: '请选择商品小类', pattern: /.+/, trigger: 'change' }
                ],
                price: [
                    { required: true, message: '请填写价格', pattern: /.+/, trigger: 'change' }
                ]
            }
        }
    },
    methods: {
        init () {
            // 加载品类
            this.loadCategory()
            // 初始化数据
            this.$bus.fillData(this.formItem, this.$route.query.row)
        },
        loadCategory () {
            let url = this.categoryURL + '/findAll'
            this.$ajax.get(url).then((response) => {
                let {code, data, msg} = response.data
                if (code === 0) {
                    this.bigCategorys = data
                } else {
                    this.$bus.alert('error', msg)
                }
            })
        },
        changeBigCategory (option) {
            this.formItem.bigClassId = option.value
            this.formItem.bigClassName = option.label
            if (option.value) {
                let url = this.categoryURL + '/findByParentId/' + option.value
                this.$ajax.get(url).then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.smallCategorys = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            } else {
                this.smallCategorys = []
            }
        },
        changeSmallCategory (option) {
            this.formItem.smallClassId = option.value
            this.formItem.smallClassName = option.label
        },
        save () {
            this.$refs['formItem'].validate((valid) => {
                if (valid) {
                    let url = this.baseURL + '/saveOrUpdate'
                    this.$ajax.post(url, this.formItem).then((response) => {
                        let {code, msg} = response.data
                        if (code === 0) {
                            this.$bus.alert('success', msg)
                            this.$bus.init(this.formItem)
                            this.reset()
                        } else {
                            this.$bus.alert('error', msg)
                        }
                    })
                }
            })
        },
        reset () {
            this.$refs.formItem.resetFields()
        },
        close () {

        }
    },
    beforeRouteEnter (to, from, next) {
        next(vm => {
            vm.init()
        })
    }
}
</script>

<style>

</style>
